<template>
  <div class="container page">

    <!-- <p v-if="!address.userName" @click="shipping" style="text-align:center;margin:100rpx;">选择收获地址</p>
    <p v-if="address.userName" @click="shipping" style="text-align:center;margin:100rpx;">{{address.userName}},{{address.telNumber}}</p>

    <p>购买商品</p>

    <div class="productList" :key="product" v-for="product of productList">
      <div>
        <img :src="product.main_image">
      </div>
      <div class="des">
        <p style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{product.name}}</p>
        <p style="height: 60rpx;"></p>
        <p class="price"><span>数量:{{product.quantity}}个</span><span style="text-align:right;font-size: 40rpx;color:#44CFDC;">¥{{product.price}}</span></p>
      </div>
    </div>

    <p style="margin:20rpx;">备注</p>
  
    <input type="text" style="border: 1px solid #ddd;margin:20rpx;padding:100rpx;">



    <p style="margin:100rpx;">&nbsp</p> -->

    <div class="display-img">
        <ul class="address" v-if="!address.userName" @click="shipping">选择收获地址</ul>
        <ul class="address" style="text-align: left;padding:20rpx;" v-if="address.userName" @click="shipping">{{address.userName}},{{address.telNumber}} </ul>
        <ul class="address" style="text-align: left;padding:20rpx;" v-if="address.userName" @click="shipping">{{address.provinceName}},{{address.countyName}},{{address.detailInfo}} </ul>
    </div>

    <div class="">

        <div class="display-imgs"  :key="porduct" v-for="porduct of productList">
            <ul class="flex-img">
                <img :src="porduct.main_image" class="img"/>
            </ul>
            <ul style="margin: 20rpx 70rpx;">
                <!-- <li class="vvu">&nbsp</li> -->
                <li>{{porduct.name}}</li>
                <li>&nbsp</li>
                <li>
                    <p style="color:#fff;background-color:#515151;width:50%">￥{{porduct.price}}  x  {{porduct.quantity}}</p>
                  
                </li>
            </ul>
            <!-- <ul class="flex-product">
                <li class="display-price">
                    <p class="flex-price1">￥{{porduct.price}}</p>
                    <p class="flex-price2">x  {{porduct.quantity}}</p>
                </li>
            </ul> -->
        </div>


        <div class="display-note">
            <ul style="background-color:#e6e6e6;text-align:center;padding-top:20rpx">备注</ul>
            <input type="text" style="width:100%;line-height:136rpx;height:136rpx" v-model="remark">
        </div>
    </div>

    <div style="height:150rpx;"></div>

    <!-- <div class="order">
      <div>共{{totalnum}}件</div>
      <div>总价:{{total}}</div>
      <div style="color:#fff;background-color:#44CFDC;" @click="ordercreate()"> 提交订单 </div>   
    </div> -->

    <div class="order" style="font-size: 25rpx;">
      <div>共{{totalnum}}件</div>
      <div>总价:￥{{total}}</div>
      <div style="color:#fff;background-color:#000;" @click="ordercreate()"> 提交订单 </div>   
    </div>

  </div>
</template>
<script>
// var WXBizDataCrypt = require('@/tools/WXBizDataCrypt')
import qcloud from 'wafer2-client-sdk'
 
import {showSuccess, showModal} from '@/util'
import {get, getAuth, post, postAuth} from '@/util'
// import {get2, post2} from '@/server/api'
import config from '@/config'
export default {
 
  data () {
    return {
      remark: "",
      totalnum: 0,
      address: {},
      total: 0,
      orderlist: [],
      tabA: 0,
      productList: [],
      createList: [],
      focus: true,
      inputValue: ''
    }
  },
  mounted () {
    this.userinfo = wx.getStorageSync('userinfo')
  },
  onShareAppMessage() {
    return {
      title: `${wx.getStorageSync('userinfo').nickName}邀请你使用好区多`,
      imageUrl: 'https://www.rrjiaoyi.com/static/rr-min/share/share.png',
      path: `/pages/me/main?sharepath=home`
    }
  },
  methods: {
    ordercreate() {
          console.log((JSON.stringify(this.orderlist)))
      
      if(!this.address.userName) {
          wx.showToast({
            title: '请选择收货地址',
            icon: 'none'
          })
        return
      }

      postAuth(`geweb/order/create?shippingwx=${encodeURI(JSON.stringify(this.address))}&userid=${JSON.parse(wx.getStorageSync('user').id)}&orderlist=${encodeURI(JSON.stringify(this.createList))}&remark=${this.remark}`, {}, {})
      .then(result => {

        if(result.code === 301) {
          wx.switchTab({
            url: `/pages/usercenter/main`
          })
          wx.showToast({
            title: '请登录',
            icon: 'none'
          })
        }

        if(result.code === 200) {

          console.log("下单成功")
          wx.showToast({
            title: '下单成功',
            icon: 'none'
            // success, success_no_circle, loading，none
          })

          wx.redirectTo({
            url: `/pages/orderlist/main`
          })

        }
        
      })

    },
    // 总价
    getTotalPrice(){
        let carts = this.orderlist;                  
        let total = 0;
        let totalnum = 0
        for(let i = 0; i<carts.length; i++) {         
            if(carts[i].checked) {                   
                total += carts[i].quantity * carts[i].price;
                totalnum += carts[i].quantity
            }
        }
        this.total = total
        this.totalnum = totalnum
    },
    async get_product(categoryId) {
      return await get(`geweb/product/get_productlist?categoryId=${categoryId}`, {}).then(result => {
        console.log(result.res)
        this.productList = result.res;
      })
    },
    productChoose (id) {
      // console.log(name, img, userId, accountId)
      wx.navigateTo({
        url: `/pages/product-detail/main?id=${id}`
      })
    },
    async player() {
      return await post('minipro/List', {}, {'api':'all', 'page':1})
    },
    async shipping() {
          // wx.navigateTo({
          //   url: '/pages/shipping/main'
          // })

        wx.chooseAddress({

          success: res => {
            this.address = res
            console.log(this.address)
            console.log(JSON.stringify(this.address))

          }

        })

    },
    async joke() {
      return await get2('api/jokes', {})
    },
    predict () {
      wx.navigateTo({
        url: '/pages/search/main'
      })
    },
    jumpClick (comment) {
      wx.navigateTo({
        // url: '/pages/web-view/main'
        url: '/pages/web-view/main?path=' + 'https://wj.qq.com/s/2491547/f457/'
        // url: '/pages/detail/main'
      })
    }

  },
  onShow () {
    // this.get_product("")

      this.orderlist = JSON.parse(decodeURIComponent(this.$root.$mp.query.orderlist))

      console.log('orderlist', this.orderlist)
      this.productList = this.orderlist

      let order = this.orderlist; 
      this.createList = [];

      for(let i = 0; i<order.length; i++) {
          
          let item = {}
          item.id = order[i].id
          item.quantity = order[i].quantity
          this.createList.push(item)

      }
      console.log('createList', this.createList)

      this.getTotalPrice()
      // get(`geweb/product/get_productlist?categoryId=100002`, {}).then(result => {
      //   console.log(result.res)
      //   this.productList = result.res;
      // })

  }
}
</script>

<style scoped lang='scss'>
.container{
  font-size: 30rpx;
}
page {
  background-color: #ffffff;
  width: 100%;
  height: 100%;
}
.section {
  text-align: center;
  margin-top: 200rpx;
  padding: 0 100rpx;
  display: flex;
  height: 80rpx;
  line-height: 80rpx;
}
.recomond {
  margin: 0 25rpx;
  margin-top: 25rpx;  
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  display: flex;
  p {
    flex: 1;
  }
}
.choose {
  color: #44CFDC;
}

.productList {
  margin: 0 25rpx;
  margin-top: 50rpx;
  border: 1px solid #ddd;
  border-radius: 4px;
  height: 200rpx;
  // line-height: 200rpx;
  display: flex;
  text-align: center;
  div {
    flex: 1;
      img{
        width: 180rpx;
        height:180rpx;
        margin: 10rpx;
        // border-radius: 50%;
    }
  }
  .des{
    width: 400rpx;
    flex: 3;
    height: 200rpx;
    margin: 10rpx 30rpx;
    p {
      text-align: left;
      line-height: 60rpx;
    }
    .price {
      display: flex;
      span {
        flex: 1;
      }
    }
  }
}
.order {
  z-index: 999;
  position: fixed; 
  bottom: 0; 
  width: 100%; 
  background-color: #ffffff;
  height: 80rpx;
  line-height: 80rpx;
  display: flex;
  text-align: center;
    div {
      flex: 1;
    }
}

.foot {
  color: rgb(45, 161, 187);
  text-align: center;
  margin-top: 200rpx;
}

.display-bottom{
        display:flex;
        background: #C8D3D1;
        height: 80rpx;
        line-height: 80rpx;
        margin-top: 10rpx;
    }
    .flex-bottom{
        flex: 3;
    }
    .address{
      text-align: center;
      padding: 30rpx;
        // margin-left: 40px;
        // margin-top: 20px;
        // margin-bottom: 5px;
        // font-size: 13px;
    }
    .flex-buttoms{
        flex: 1;
    }
    .address2{
        margin-left: 40px;
        margin-bottom: 20px;
        font-size: 13px;
    }
    .price1{
        margin-left: 15px;
        margin-bottom: 8px;
        font-size: 13px;
        margin-top: 10px;
    }
    .price{
        margin-left: 15px;
        margin-bottom: 8px;
        font-size: 13px;
    }
    .display-note{
        display: flex;
        border: 1px solid #cfcfcf;
        height: 68px;
        margin-left: 18px;
        margin-right: 18px;
        margin-bottom: 18px;
        // line-height: 68px;
        // background: #C8D3D1;
    }
    .flex-note{
        flex: 1;
        font-size: 13px;
    }
    .flex-notes{
        flex: 9;
        height: 64px;
    }
	.flex{
        flex: 1;
        border: 1.5px solid #cfcfcf;
        height: 25px;
        line-height: 25px;
        font-size: 10px;
        font-weight:bold;
    }
    .display-img{
        border: 1px solid #cfcfcf;
        margin: 20rpx;
    }
    .display-imgs{
        margin-bottom: 20px;
        margin-top: 18px;
        display:flex;
    }
    .flex-img{
        flex: 1;
    }
    .flex-product{
        flex: 1.5;
        margin-left: 10px;
    }
    .img{
        width: 100px;
        height: 100px;
        margin-left: 22px;
    }
    .display-price{
        display:flex;
        background: #C8D3D1;
        margin-top: 71px;
        height: 23px;
        line-height: 23px;
    }
    .flex-price1{
        flex: 1;
        font-size: 13px;
        text-align: right;
        margin-right: 18px;
    }
    .flex-price2{
        flex: 1;
        text-align: left;
        font-size: 13px;
    }
    .vvu{
        font-size: 22px;
    }
    .buttons{
        font-weight:bold;
        width:85px;
        height:21px;
        background: #636363;
        color: white;
    
    }
</style>
